<template>
  <view>
    <uni-search-bar class="kg-bg-color-grey" bg-color="#ffffff" :radius="100" @confirm="handleSearch"></uni-search-bar>

    <kg-scroll-view-custom class="kg-flex-item kg-overflow-hidden kg-width-100"
      :query="query"
      :getDataFunc="getDataHandle"
    >
    <template v-slot="{ list }">
      <view class="kg-cell-box">
        <view class="kg-cells">
          <view class="kg-cell kg-cell_access" v-for="(item, i) in list" :key="i">
            <view class="kg-cell-content">
              <view class="kg-cell-content-bd">{{item.id}}, {{item.title}}</view>
              <view class="kg-cell-content-ft">{{item.datetime}}</view>
            </view>
          </view>
        </view>
      </view>
    </template>
    </kg-scroll-view-custom>
  </view>
</template>

<script>
import { listMockNews } from 'api/mock1'

export default {
  data () {
    return {
      searchValue: '',
      query: {},
    }
  },
  onLoad (options) {
  },
  onHide () {
  },
  onShow () {
  },
  methods: {

    // 固定方法：获取列表数据
    getDataHandle (query, loading) {
      return listMockNews(query, loading).then(res => {
        let list = res.items || []
        list = list.map(x => {
          return {
            id: x.id,
            title: x.title,
            datetime: x.datetime,
          }
        })
        return { items: list, count: res.count }
      })
    },

    handleSearch () {
      if (this.searchValue !== '') {
        this.query = {
          search: this.searchValue,
        }
      }
    },
  },
}
</script>

<style lang="scss">
@include page-flex();
</style>
